<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body style="padding:10px">
    <h3>员工信息表</h3>
    <div style="padding:10px">
        <button class="btn btn-primary" data-toggle="modal" data-target="#add">新增</button>
        <!-- 声明定义模态框组件 -->
        <div class="modal" id="add" data-backdrop="static">
            <!-- 窗口声明 -->
            <div class="modal-dialog">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 1.框的标题 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">请输入员工信息：</h4>
                    </div>
                    <!-- 2.框内信息 -->
                    <div class="modal-body">
                        <form>
                            <p>工&nbsp号：<input type="text" id="order"></p>
                            <p>姓&nbsp名：<input type="text" id="name"></p>
                            <p>性&nbsp别：<input type="text" id="sex"></p>
                            <p>密&nbsp码：<input type="password" id="password"></p>
                            <p>年&nbsp龄：<input type="text" id="age"></p>
                            <p>出生日期:<input type="date" id="birthday"></p>
                        </form>
                    </div>
                    <!-- 3.框的按钮 -->
                    <div class="modal-footer">
                        <button class="btn btn-info" onclick="addtr()" data-dismiss="modal">确定</button>
                        <button class="btn btn-default" data-dismiss="modal">取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 为按钮添加删除用户信息的方法 -->
        <button class="btn btn-primary" onclick="deltr()">删除</button>
        <!-- 为按钮添加修改用户信息的方法  只设置了修改密码-->
        <button class="btn btn-primary"  data-toggle="modal" data-target="#modify">编辑</button>
        <!-- 声明定义模态框组件 -->
        <div class="modal" id="modify" data-backdrop="static">
                <!-- 窗口声明 -->
                <div class="modal-dialog">
                    <!-- 内容声明 -->
                    <div class="modal-content">
                        <!-- 1.框的标题 -->
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                            <h4 class="modal-title">请输入：</h4>
                        </div>
                        <!-- 2.框内信息 -->
                        <div class="modal-body">
                            <form>
                                <p>旧密码：<input type="password" id="oldpassword"></p>
                                <p>新密码：<input type="password" id="newpassword"></p>
                            </form>
                        </div>
                        <!-- 3.框的按钮 -->
                        <div class="modal-footer">
                            <button class="btn btn-info"  data-dismiss="modal" onclick="modify()">保存</button>
                            <button class="btn btn-default" data-dismiss="modal">取消
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        <!-- 为按钮添加查询用户信息的方法 -->
        <button class="btn btn-primary" onclick="select()">查询</button>
        <input type="text" placeholder="按工号查询" id="selectbyid">
        <input type="text" placeholder="按姓名查询" id="selectbyname">
    </div>
    <!-- 设计表格 -->
    <table class="table table-borderde table-striped" id="table01">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="check">
                </td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check">
                </td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check">
                </td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>25</td>
                <td>1995-5-5</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="check"">
                </td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>23</td>
                <td>1997-7-7</td>
            </tr>
        </tbody>
    </table>

    <script src="./bootstrap/js/jquery-3.3.1.min.js"> </script> 
    <script src="./bootstrap/js/bootstrap.min.js"></script>
        <script>
            //增加员工信息的方法 使用字符拼接创建新行 
            function addtr() {
                var tb = document.getElementById("table01");
                var tr = tb.insertRow();
                var check = `<input type="checkbox" name = "check">`;
                var order = document.getElementById(`order`).value;
                var name = document.getElementById(`name`).value;
                var sex = document.getElementById(`sex`).value;
                var password = document.getElementById(`password`).value;
                var age = document.getElementById(`age`).value;
                var birthday = document.getElementById(`birthday`).value;
                tr.innerHTML = "<td>" + check + "</td>"
                    + "<td>" + order + "</td>"
                    + "<td>" + name + "</td>"
                    + "<td>" + sex + "</td>"
                    + "<td>" + password + "</td>"
                    + "<td>" + age + "</td>"
                    + "<td>" + birthday + "</td>"

            }
            //删除复选框中选中的行
            function deltr() {
                var arr = document.getElementsByName("check");
                for (var i = arr.length - 1; i >= 0; i--) {
                    if (arr[i].checked) {
                        $(arr[i]).parents("tr").remove();
                    }
                }
            }
            //修改员工信息的方法
            function modify() {
                var arr = document.getElementsByName("check");
                var newpassword = document.getElementById("newpassword").value;
                var trr = $("#table01 tr:gt(0)");
                var flag = false;
                for (var i = arr.length - 1; i >= 0; i--) {
                    if(arr[i].checked) {
                        flag = true;
                        trr.eq(i).find("td:eq(4)").html(newpassword);
                        break
                    }
                }
                if(!flag){
                alert("请选择需要修改的员工！");  
                return false ;  
                }
            }
            //查询员工信息的方法
            function select() {
                var sbi = document.getElementById("selectbyid").value;
                var sbn = document.getElementById("selectbyname").value;
                var trr = $("#table01 tr:gt(0)");
                if (sbi != "" || sbn != "") {
                    for (var i = 0; i < trr.length; i++) {
                        var id = trr.eq(i).find("td:eq(1)").html();
                        var name = trr.eq(i).find("td:eq(2)").html();
                        if (id == sbi || name == sbn) {
                            trr.eq(i).show();
                        }
                        else {
                            trr.eq(i).hide();
                        }
                    }
                }
            }
        </script>
</body>

</html>